<template>
	<view class="addBox">
		<view class="title f-32">加工</view>
		<view class="flex flex-y-center  flex-wrap jgBox">
			<view class="item  flex flex-y-center mb20" :class="[lookJzFn('mxb')!=-1?'ac':'']"
				@click="checkboxChangeJg('mxb')">
				<view class="dian"></view>
				<text class="iconfont icon-duihao f-26 "></text>
				<view class="f-26 ">单边磨斜边</view>
			</view>
			<view class="item flex flex-y-center mb20" :class="[lookJzFn('dbmxb')!=-1?'ac':'']"
				@click="checkboxChangeJg('dbmxb')">
				<view class="dian"></view>
				<text class="iconfont icon-duihao f-26 "></text>
				<view class="f-26 ">多边磨斜边</view>
			</view>
			<view class="item flex flex-y-center mb20" :class="[lookJzFn('bll')!=-1?'ac':'']"
				@click="checkboxChangeJg('bll')">
				<view class="dian"></view>
				<text class="iconfont icon-duihao f-26 "></text>
				<view class="f-26 ">玻璃助</view>
			</view>
			<view class="item flex flex-y-center mb20" :class="[lookJzFn('dxp')!=-1?'ac':'']"
				@click="checkboxChangeJg('dxp')">
				<view class="dian"></view>
				<text class="iconfont icon-duihao f-26 "></text>
				<view class="f-26 ">单边大小片</view>
			</view>
			<view class="item flex flex-y-center mb20" :class="[lookJzFn('dbdxp')!=-1?'ac':'']"
				@click="checkboxChangeJg('dbdxp')">
				<view class="dian"></view>
				<text class="iconfont icon-duihao f-26 "></text>
				<view class="f-26 ">多边大小片</view>
			</view>
		

			<!-- <checkbox-group @change="checkboxChangeJg">
				<label>
					<checkbox value="mxb" color="#E60619" style="transform:scale(0.6)" /><text class="f-26">单边磨斜边</text>
				</label>
				<label>
					<checkbox value="dxp" color="#E60619" style="transform:scale(0.6)" /><text class="f-26">大小片</text>
				</label>
				<label>
					<checkbox value="bll" color="#E60619" style="transform:scale(0.6)" /><text class="f-26">玻璃助</text>
				</label>
				<label>
					<checkbox value="dbmxb" color="#E60619" style="transform:scale(0.6)" /><text
						class="f-26">多边磨斜边</text>
				</label>
			</checkbox-group> -->
		</view>
		<view class="title f-32">边部涂黑</view>
		<view class="flex flex-y-center flex-x-between addItem"
			@click="choicePircker('djArr',sendData.inquiryExtraVo.bbdj)">
			<view>{{sendData.inquiryExtraVo.bbdj||'请选择'}}</view>
			<text class="iconfont icon-xiala f-28"></text>
		</view>
		<view class="title f-32">异形</view>
		<view class="flex flex-y-center flex-x-between addItem"
			@click="choicePircker('xzArr',sendData.inquiryExtraVo.alien)">
			<view>{{sendData.inquiryExtraVo.alien||'请选择'}}</view>
			<text class="iconfont icon-xiala f-28"></text>
		</view>
		<view class="title f-32">4SG超极限加工</view>
		<view class="flex flex-y-center flex-x-between addItem"
			@click="choicePircker('jxArr',sendData.inquiryExtraVo.csbjxjg)">
			<view>{{sendData.inquiryExtraVo.csbjxjg||'请选择'}}</view>
			<text class="iconfont icon-xiala f-28"></text>
		</view>
		<view class="title f-32">其他</view>
		<view class="">
			<checkbox-group class="flex flex-y-center flex-x-between flex-wrap">
				<!-- <label class="flex flex-y-center label mb30">
					<checkbox value="cb" :checked="sendData.inquiryExtraVo.punchingNumber>0?true:false" color="#E60619"
						style="transform:scale(0.7)" /><text class="f-28">打孔</text>
					<input type="number" v-model="sendData.inquiryExtraVo.punchingNumber" placeholder="请输入" />
					<text>个</text>
				</label>
				<label class="flex flex-y-center label mb30">
					<checkbox value="cb" class="checkboxDisabled"
						:checked="sendData.inquiryExtraVo.cavernOutNumber>0?true:false" color="#E60619"
						style="transform:scale(0.7)" /><text class="f-28">挖缺</text>
					<input type="number" v-model="sendData.inquiryExtraVo.cavernOutNumber" placeholder="请输入" />
					<text>个</text>
				</label> -->
				<label class="flex flex-y-center label">
					<checkbox readonly value="cb" :checked="sendData.count>0?true:false" color="#E60619"
						style="transform:scale(0.7)" /><text class="f-28">玻璃数量</text>
					<input type="number" v-model="sendData.count" placeholder="请输入" />
					<text>个</text>
				</label>
			</checkbox-group>
		</view>
		<view class="bjBot flex flex-y-center flex-x-between">
			<view class="btn1 item" @click="jumpBack">取消</view>
			<view class="btn2 item" @click="okCx">确认查询</view>
		</view>
		<uni-popup ref="pickerDom" type="bottom" style="z-index: 9999999;position: relative;" @change="changePopup">
			<div class="popup-view" style="padding-bottom: 0;">
				<div class="popup-view-header">
					<div class="popup-view-cancel" @click="pickerCancel" style="color: #999;"> 取消 </div>

					<div class="popup-view-confirm" @click="pickerConfirm" style="color: #ff2826;"> 完成 </div>
				</div>
				<picker-view :immediate-change="true" :indicator-style="pickerObj.indicatorStyle"
					:value="pickerObj.pickerIndex" @change="bindPickerChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in pickerObj.dataList" :key="index">{{item.dictLabel}}
						</view>
					</picker-view-column>
				</picker-view>
			</div>
		</uni-popup>
	</view>
</template>

<script setup>
	import store from "/store/index.js";
	import {
		ref
	} from 'vue'
	import {
		inquiry,
		getDictData,
	} from "@/api/index.js";
	const pickerDom = ref(null)
	const pickerObj = ref({
		indicatorStyle: `height: 40px;padding-bottom:0`,
		showIndex: -1,
		showIndex1: -1,
		pickerIndex: [0, 0, 0],
		dataList: [], //显示选择的数据
		curChoice: '', //当前选择数据标识
	})
	const pageData = ref({
		xzArr: [],
		djArr: [{
			dictLabel: '是'
		}, {
			dictLabel: '否'
		}],
		jxArr: [{
			dictLabel: '是'
		}, {
			dictLabel: '否'
		}],
		choiceJzArr: []
	})
	const sendData = ref({
		count: '1', //数量
		inquiryExtraVo: {
			dbmxb: '', //单边磨斜面
			dxp: '', //大小片
			dbdxp: '', //多边大小片
			bll: '', //玻璃肋
			mxb: '', //多边磨斜面
			bbdj: '', //
			alien: '', //形状
			csbjxjg: '', //超设备极限加工
			punching: '', //打孔
			punchingNumber: '', //打孔数量
			cavernOut: '', //挖缺
			cavernOutNumber: '', //挖缺数量
		}
	})
	onLoad((opt) => {
		let obj = JSON.parse(opt.params);
		sendData.value = {
			...obj,
			...sendData.value
		}
	})

	const choicePircker = (value, val) => {
		pickerObj.value.curChoice = value;
		pickerObj.value.dataList = pageData.value[value];
		if (val) {
			backIndex(val)
		}
		pickerDom.value.open()
	}
	const backIndex = (val) => {
		// picker回显index 
		let i = 0;
		pickerObj.value.dataList.forEach((el, index) => {
			if (el.dictLabel == val) {
				i = index
			}
		})
		pickerObj.value.pickerIndex[0] = i
	}
	const bindPickerChange = (e) => {
		pickerObj.value.pickerIndex[0] = e.detail.value[0]
	}
	const changePopup = (e) => {
		if (!e.show) {
			pickerObj.value.pickerIndex = ['0', '0', '0']
		}
	}
	const pickerCancel = () => {
		pickerObj.value.pickerIndex = [0, 0, 0]
		pickerDom.value.close()
	}
	// 点击完成
	const pickerConfirm = () => {
		let index = pickerObj.value.pickerIndex[0];
		let idx = pickerObj.value.pickerIndex[1];
		if (pickerObj.value.curChoice == 'xzArr') {
			sendData.value.inquiryExtraVo.alien = pickerObj.value.dataList[index].dictLabel;
		} else if (pickerObj.value.curChoice == 'djArr') {
			sendData.value.inquiryExtraVo.bbdj = pickerObj.value.dataList[index].dictLabel;
		} else if (pickerObj.value.curChoice == 'jxArr') {
			sendData.value.inquiryExtraVo.csbjxjg = pickerObj.value.dataList[index].dictLabel;
		}
		pickerCancel()
	}
	// 数据字典获取函数
	const blpzFn = (dataType, arr) => {
		getDictData({
			dataType: dataType
		}).then((res => {
			pageData.value[arr] = res.data;
		}))
	}
	// 获取打胶
	blpzFn('ng_yx', 'xzArr');
	// 加工选择
	const checkboxChangeJg = (val) => {
		const index = lookJzFn(val);
		if (index == -1) {
			// 不存在则添加
			pageData.value.choiceJzArr.push(val);
		} else {
			// 存在则删除
			pageData.value.choiceJzArr.splice(index, 1);
		}
	};
	const lookJzFn = (val) => {
		const index = pageData.value.choiceJzArr.indexOf(val);
		return index
	}
	// 确定查询
	const okCx = () => {
		let sendParams = JSON.parse(JSON.stringify(sendData.value))

		if (sendParams.count <= 0) {
			uni.$showMsg("请输入玻璃数量");
			return false
		}
		if (pageData.value.choiceJzArr.length > 0) {
			if (lookJzFn('dbmxb') != -1) {
				sendParams.inquiryExtraVo.dbmxb = '1'
			}
			if (lookJzFn('dxp') != -1) {
				sendParams.inquiryExtraVo.dxp = '1'
			}
			if (lookJzFn('bll') != -1) {
				sendParams.inquiryExtraVo.bll = '1'
			}
			if (lookJzFn('mxb') != -1) {
				sendParams.inquiryExtraVo.mxb = '1'
			}
			if (lookJzFn('dbdxp') != -1) {
				sendParams.inquiryExtraVo.dbdxp = '1'
			}
		}
		sendParams.inquiryExtraVo.bbdj = sendParams.inquiryExtraVo.bbdj == '是' ? '1' : ''
		sendParams.inquiryExtraVo.csbjxjg = sendParams.inquiryExtraVo.csbjxjg == '是' ? '1' : ''

		inquiry({
			...sendParams,
			userId: store.state.userInfo.userId
		}).then((res => {
			if (res.code == 200) {
				uni.navigateTo({
					url: '/pages/gsList/gsList?pageType=bjSearch&pageData=' + JSON.stringify(res
						.data)
				})
				// 估算成功清空报价询价页面数据
				// uni.$emit('pzClear')
			} else {
				uni.$showMsg(res.msg || '请联系管理员')
			}
		}))
	}
	// 返回
	const jumpBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.addBox {
		padding: 10rpx 30rpx 30rpx 30rpx;

		.title {
			line-height: 100rpx;
			color: #333;
		}

		.jgBox {

			.item {
				padding: 8rpx 15rpx;
				border-radius: 50rpx;
				background-color: #eaeaea;
				color: #a7a7a7;
				margin-right: 30rpx;
				.dian {
					width: 10rpx;
					height: 10rpx;
					background-color: #a7a7a7;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.icon-duihao {
					display: none;
				}
			}

			.item.ac {
				color: #fff;
				background-color: #F6AD00;

				.dian {
					display: none;
				}

				.icon-duihao {
					color: #fff;
					display: block;
					margin-right: 5rpx;
				}
			}
		}

		.addItem {
			height: 88rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #EFEFEF;
			border-width: 1px;
			border-style: solid;
			border-color: rgb(133, 133, 133);
			border-radius: 10rpx;
			font-size: 30rpx;
			color: #333;
		}
	}

	.popup-view {
		background-color: #FFFFFF;

		.popup-view-header {
			text-align: center;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
			padding: 0 30rpx;
			box-sizing: border-box;

			div {
				width: 150rpx;
				height: 100%;
				box-sizing: border-box;
				padding: 0 28rpx;
				font-size: 34rpx;
				line-height: 90rpx;

				&::first-child {
					color: #888888;
				}

				&::last-child {
					color: #ff2826;
				}
			}

			.input {
				width: 50%;
				line-height: 90rpx;
				height: 90rpx;
				font-size: 28rpx;
			}
		}

		.picker-view {
			width: 100%;
			height: 476rpx;
			margin-top: 20rpx;
			margin-bottom: -68rpx;

			.item {
				height: 40px !important;
				line-height: 40px;
				text-align: center;
				color: #000;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				cursor: pointer;
			}
		}
	}

	.bjBot {
		padding: 0 30rpx 30rpx 30rpx;
		position: fixed;
		bottom: 50rpx;
		left: 0;
		width: 100%;
		box-sizing: border-box;

		.item {
			width: 48%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #F6AD00;
			background-color: #DDD;
			font-size: 30rpx;
			border-radius: 10rpx
		}

		.btn2 {
			@include bg();
			color: #fff;
		}
	}

	.label {
		input {
			width: 150rpx;
			height: 66rpx;
			background-color: #efefef;
			border-radius: 10rpx;
			text-align: center;
			font-size: 28rpx;
			margin: 0 10rpx;
		}
	}
</style>